// import {Button} from 'antd';

// import {RollbackOutlined} from '@ant-design/icons';
import {useRoutes,useLocation,useNavigate} from 'react-router-dom';
import {useSelector} from 'react-redux';
import routes from '@/router';
import {useEffect} from 'react';
import {message} from 'antd';

function ToLogin(){
  const navigate = useNavigate();
  useEffect(() =>{
    message.warning('您还没登录，请前往登录');
    navigate('/login');
  },[])
  return <div></div>
}

function ToHome(){
  const navigate = useNavigate();
  useEffect(() =>{
    message.warning('您已没登录过，无需再次登录');
    navigate('/');
  },[])
  return <div></div>
}


function BeforeRouterEnter() {
  const {token} = useSelector((state:RootState) => ({token:state.handleruser.token}))
  const outlet = useRoutes(routes);
  const location = useLocation();

  // 没有token，router.path != '/login' 和 router.pathname != '/register'
  const widthRoutes = ['/login','register'];
  if(!token && !widthRoutes.includes(location.pathname)){
    return <ToLogin />
  }

  // 已经登录，去login，直接去home
  if(token && location.pathname == '/login'){
    return <ToHome /> 
  }
  return outlet;
}


function App() {
  
  return (
    <div className="App">
      {/* <Outlet /> */}

      {/* 路由对象的写法 */}
      <BeforeRouterEnter /> 
    </div>
  )
}

export default App
